<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
            <el-form-item label="发送人" prop="sendNickName">
                <el-input v-model="queryParams.sendNickName" placeholder="请输入发送用户名称" clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="责任人" prop="receiveNickName">
                <el-input v-model="queryParams.receiveNickName" placeholder="请输入责任人用户名称" clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="任务标题" prop="title">
                <el-input v-model="queryParams.title" placeholder="请输入任务标题" clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="单据编码" prop="billCode">
                <el-input v-model="queryParams.billCode" placeholder="请输入单据编码" clearable @keyup.enter.native="handleQuery"/>
            </el-form-item>
            <el-form-item label="进度状态" prop="scheduleStatus">
                <el-select v-model="queryParams.scheduleStatus" placeholder="请选择进度状态" clearable>
                    <el-option v-for="dict in dict.type.progress_status" :key="dict.value" :label="dict.label" :value="dict.value"/>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <TableCard>
            <el-table  :border="Global.tableShowBorder" v-loading="loading" :data="sendTaskList">
                <el-table-column label="跟踪" align="center" class-name="small-padding fixed-width" width="100">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" icon="el-icon-view" @click="track(scope.row)" :disabled="false" style="color: #34bfa3">跟踪</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text" v-if="scope.row.scheduleStatus!='1'&&scope.row.scheduleStatus!='2'" icon="el-icon-view" @click="changeStatus(scope.row,'1','启动')" :disabled="false">启动</el-button>
                        <el-button size="mini" type="text" v-if="scope.row.scheduleStatus!='3'" icon="el-icon-view" @click="changeStatus(scope.row,'3','搁置')" :disabled="false" style="color: #f8ac59">搁置</el-button>
                        <el-button size="mini" type="text" v-if="scope.row.scheduleStatus!='2'" icon="el-icon-view" @click="changeStatus(scope.row,'2','完成')" :disabled="false" style="color: red">完成</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150">
                    <template slot-scope="scope">
                        <el-button size="mini" type="text"  icon="el-icon-rank"          @click="flowDetail(scope.row)" v-hasPermi="['oa:sendTask:edit']">流程信息</el-button>
                        <el-button size="mini" type="text"  icon="el-icon-view"          @click="handleView(scope.row)" v-hasPermi="['oa:sendTask:edit']">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column label="发送人" align="center" prop="sendNickName" width="120"/>
                <el-table-column label="责任人" align="center" prop="receiveNickName" width="120"/>
                <el-table-column label="任务标题" align="center" prop="title" />
                <el-table-column label="提交时间" align="center" prop="submitTime" width="180">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.submitTime, '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="流程状态" align="center" prop="status" width="120">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.oa_flow_billstatus" :value="scope.row.status"/>
                    </template>
                </el-table-column>
                <el-table-column label="截止时间" align="center" prop="finishTime" width="180">
                    <template slot-scope="scope">
                        <span v-html="compareFinishTime(scope.row.finishTime)"></span>
                    </template>
                </el-table-column>
                <el-table-column label="进度" prop="schedule" width="150">
                    <template slot-scope="scope">
                        <el-slider v-model="scope.row.schedule" v-if="scope.row.scheduleStatus=='1'" @change="changeSchedule(scope.row)"></el-slider>
                        <el-slider v-model="scope.row.schedule" v-if="scope.row.scheduleStatus!='1'" :disabled="true"></el-slider>
                    </template>
                </el-table-column>
                <el-table-column label="进度状态" align="center" prop="scheduleStatus" width="120">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.progress_status" :value="scope.row.scheduleStatus"/>
                    </template>
                </el-table-column>
            </el-table>

            <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
        </TableCard>

        <el-drawer title="任务跟踪" :visible.sync="showTrack" direction="rtl" :before-close="closeTrack">
            <el-button type="primary" plain icon="el-icon-circle-plus-outline" size="mini" @click="openAddTrackDialog" style="margin-left: 10px;">添加跟踪信息</el-button>
            <div class="trackList">
                <div class="row" v-for="item in trackList">
                    <div class="avatar">
                        <el-avatar v-if="!util.isEmpty(item.avatar)" :size="40" :src="baseUrl+item.avatar">
                            <el-avatar :size="60" :style="`font-size: 20px;background-color: ${extractColorByName(item.trackNickName)}`" >
                                {{item.trackNickName.substr(0,1)}}
                            </el-avatar>
                        </el-avatar>

                        <el-avatar v-if="util.isEmpty(item.avatar)" :size="40" :style="`font-size: 20px;background-color: ${extractColorByName(item.trackNickName)}`" >
                            {{item.trackNickName.substr(0,1)}}
                        </el-avatar>
                    </div>
                    <el-card shadow="never" class="item" >
                        <div>
                            {{item.track}}
                        </div>
                        <div style="font-size: 12px;color: #666666;margin-top: 20px;">
                            {{item.createTime}}
                        </div>
                    </el-card>
                </div>

            </div>
        </el-drawer>

        <el-dialog title="添加跟踪信息" :visible.sync="openAddTrack" width="600px" append-to-body>
            <el-form ref="addTrackForm" :model="addTrackForm" :rules="addTrackFormRules" label-width="120px">
                <el-form-item label="跟踪内容" prop="track">
                    <el-input v-model="addTrackForm.track" type="textarea" :rows="6" placeholder="请输入跟踪内容" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="saveTrack">确 定</el-button>
                <el-button @click="cancelAddTrack">取 消</el-button>
            </div>
        </el-dialog>


        <FlowInfo :businessId="businessId" :billType="billType" v-if="showFlowInfo" :showStatus="showFlowInfo" @closeFlowInfoDialog="closeFlowInfoDialog"></FlowInfo>

    </div>
</template>

<script>
import {listSendTask, updateSendTask} from "@/api/oa/sendTask";
import SelectOneUser from "@/views/common/selectUser/selectOneUser"
import SelectMulUser from "@/views/common/selectUser/selectMulUser"

import FlowInfo from "@/views/workflow/flow/flowInfo";
import {addSendTaskTrack, listSendTaskTrackAll} from "@/api/oa/sendTaskTrack"

export default {
    name: "SendTask",
    dicts: ['oa_flow_billstatus', 'progress_status'],
    components:{SelectOneUser,SelectMulUser,FlowInfo},
    data() {
        return {
            billType:"",
            showFlowInfo:false,
            businessId:null,
            showTrack:false,
            openAddTrack:false,
            trackList:[],
            baseUrl: process.env.VUE_APP_BASE_API,
            //选择用户弹窗
            showSelectOneUser:false,
            showSelectMulUser:false,
            clickRowId:null,
            addTrackForm:{

            },
            addTrackFormRules: {
                track: [
                    {required: true, message: "跟踪内容不能为空", trigger: "change"}
                ]
            },
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 任务分配表格数据
            sendTaskList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                orderByColumn:"createTime",
                isAsc:"descending",
                forTrack:"Y",
                sendUserId: null,
                sendNickName: null,
                receiveUserId: null,
                receiveNickName: null,
                title: null,
                content: null,
                extUserId: null,
                extNickName: null,
                billType: null,
                billCode: null,
                flowKey: null,
                flowInsId: null,
                submitTime: null,
                status: "2",
                tenantId: null,
                schedule: null,
                scheduleStatus: null
            },
        };
    },
    created() {
        const billType = this.$route.query && this.$route.query.billType;
        console.log("单据类型："+billType)
        if(billType){
            this.queryParams.billType = billType;
            this.billType = billType;
        }
        this.getList();
    },
    methods: {
        compareFinishTime(finishTime){
            var starttime = new Date();
            var endtime = new Date(Date.parse(finishTime));
            if(starttime>endtime){
                return "<span style='color: red'>"+finishTime+"[超期]</span>"
            }else{
                return "<span style='color: green'>"+finishTime+"[正常]</span>"
            }
        },
        /** 查询任务分配列表 */
        getList() {
            this.loading = true;
            listSendTask(this.queryParams).then(response => {
                this.sendTaskList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 查看单据详情 */
        handleView(row){
            this.$router.push({path: "/oa/sendTask/sendTask/form/" + row.id, query: {readonly:"1"}})
        },
        /** 流程信息 ***/
        flowDetail(row){
            this.businessId = row.id+"";
            this.showFlowInfo = true;
        },
        //关闭流程信息窗口
        closeFlowInfoDialog(){
            this.showFlowInfo = false;
        },
        track(row){
            this.clickRowId = row.id;
            //给新增的表单赋值
            this.addTrackForm.taskId = row.id;
            this.getTrackList();
        },
        getTrackList(){
            //查询列表
            let data = {
                taskId:this.clickRowId,
                orderByColumn: "createTime",
                isAsc: "descending",
            }
            listSendTaskTrackAll(data).then(res=>{
                this.trackList = res.data;
                this.showTrack = true;
            })
        },
        closeTrack(){
            this.showTrack = false;
        },
        openAddTrackDialog(){
            this.openAddTrack = true;
        },
        cancelAddTrack(){
            this.openAddTrack = false;
        },
        saveTrack(){
            this.$refs["addTrackForm"].validate(valid => {
                if (valid) {
                    addSendTaskTrack(this.addTrackForm).then(response => {
                        this.$modal.msgSuccess("保存成功");
                        this.getTrackList();
                        this.cancelAddTrack();
                    });
                }
            });
        },
        extractColorByName(name) {
            var temp = [];
            temp.push("#");
            if(name){
                for (let index = 0; index < name.length; index++) {
                    temp.push(parseInt(name[index].charCodeAt(0), 10).toString(16));
                }
                return temp.slice(0, 5).join('').slice(0, 4);
            }else{
                return "#666";
            }
        },
        changeStatus(row,status,name){
            this.$modal.confirm('是否'+name+'该任务？').then( ()=> {
                let data = {
                    id:row.id,
                    scheduleStatus:status
                }
                updateSendTask(data).then(res=>{
                    this.$modal.msgSuccess("启动成功");
                    this.getList();
                })
            })
        },
        changeSchedule(row){
            let data = {
                id:row.id,
                schedule:row.schedule
            }
            updateSendTask(data).then(res=>{
                this.$modal.msgSuccess("进度更新成功");
                this.getDetailData(this.form.id);
            })
        },
    }
};
</script>
<style scoped lang="scss">
.trackList{
    display: flex;
    flex-direction: column;
    margin-top: 5px;
    .row{
        display: flex;
        flex-direction: row;
        .avatar{
            margin: 10px;
        }
        .item{
            margin: 5px 20px 5px 5px;
            font-size: 14px;
            width: 100%;
        }
    }
}
</style>
